<template>
	<view class='shareDetail'>
		<view class="shareOne">
			<view class="vidContent" v-if='datas.video'>
				<video id="myVideo" :src="datas.video" enable-danmu danmu-btn controls style="width:100%;"></video>
			</view>
			<view class="imgContent imgPublic" v-if="datas.main_img">
				<image :src="datas.main_img" mode="widthFix"></image>
			</view>
			<view class="desc">
				<view class="actTit dFlex jBetween_aCenter">
					<view class="tit">{{datas.title}}</view>
					<view class="tools dFlex jEnd_aCenter">
						<view class="toolOne dFlex jCenter_aCenter">
							<view class="toolIcon imgPublic">
								<image src="../static/images/look.png" mode="widthFix"></image>
							</view>
							<text>{{datas.play_num}}</text>
						</view>
						<view class="toolOne dFlex jCenter_aCenter" @click.stop='changeCollect()'>
							<view class="toolIcon imgPublic">
								<image v-if='datas.is_collect == "0"' src="../static/images/collect.png" mode="widthFix"></image>
								<image v-if='datas.is_collect == "1"' src="../static/images/collect2.png" mode="widthFix"></image>
							</view>
							<text>{{datas.like_num}}</text>
						</view>
					</view>
				</view>
				<view class="author">作者：{{datas.author?datas.author:'-'}} {{datas.create_time?datas.create_time:'未知'}}</view>
				<!-- <view class="article">{{datas.intro?datas.intro:'暂无相关介绍'}}</view> -->
				<view class="article" v-html="datas.content"></view>
			</view>
		</view>
		<view class="titles dFlex jCenter_aCenter">
			<view class="line"></view>
			<view class="showTit">为你推荐</view>
			<view class="line"></view>
		</view>
		<view class="shareOne showOne" v-for="(item,index) in list" :key='index' @click="id = item.id;initData()">
			<view class="imgContent imgPublic">
				<image :src="item.main_img" mode="widthFix"></image>
			</view>
			<view class="desc">
				<view class="actTit dFlex jBetween_aCenter">
					<view class="tit">{{item.title}}</view>
					<view class="tools dFlex jEnd_aCenter">
						<view class="toolOne dFlex jCenter_aCenter">
							<view class="toolIcon imgPublic">
								<image src="../static/images/look.png" mode="widthFix"></image>
							</view>
							<text>{{item.play_num}}</text>
						</view>
						<view class="toolOne dFlex jCenter_aCenter" @click.stop='changeCollect(item)'>
							<view class="toolIcon imgPublic">
								<image v-if='item.is_collect == "0"' src="../static/images/collect.png" mode="widthFix"></image>
								<image v-if='item.is_collect == "1"' src="../static/images/collect2.png" mode="widthFix"></image>
							</view>
							<text>{{item.like_num}}</text>
						</view>
					</view>
				</view>
				<view class="author">作者：{{item.author?item.author:'-'}} {{item.create_time?item.create_time:'未知'}}</view>
				<view class="article">{{item.intro?item.intro:'暂无相关介绍'}}</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import {
		getShareDetail,getShareList,collectGoods
	} from '@/tools/http.js';
	export default {
		data() {
			return {
				id:'',
				tid:'',
				datas:{},
				list:[],
			};
		},
		onLoad(e) {
			this.id = e.id;
			this.tid = e.tid;
			this.initData();
			this.initList();
		},
		onShareAppMessage() {
			return{
				title:this.datas.title,
				path:'/knowledge/shareDetail?id='+this.id,
				imageUrl:'',
				desc:'手机下单 | 足不出户 | 快速直达 | 邮寄到家',
			}
		},
		onShareTimeline() {
			return{
				title:this.datas.title,
				path:'/knowledge/shareDetail?id='+this.id,
				imageUrl:'',
				desc:'手机下单 | 足不出户 | 快速直达 | 邮寄到家',
			}
		},
		methods:{
			// 详情
			async initData(){
				let res = await getShareDetail({
					id:this.id,
				})
				if(res){
					let widthStr = 'style="width: 467px;"';
					let idx = res.content.indexOf('style="width: 467px;"');
					if(idx != '-1'){
						res.content = res.content.replace(widthStr,'style="width:100%;"');
					}else{
						const reg = new RegExp('<img', 'gi');
						res.content= res.content.replace(reg, `<img style="width: 100%!important;"`);
					}
					this.datas = res;
					uni.pageScrollTo({
						scrollTop:0,
					})
				}
			},
			// 修改收藏
			async changeCollect(line){
				let res = await collectGoods({
					id:line ? line.id : this.id,
					type:'2'
				})
				if(res){
					if(line){
						line.like_num = res === true ? 0 : res;
					}else{
						this.initData();
					}
				}
			},
			// 列表
			async initList(page){
				this.page = page ? page : this.page;
				let res = await getShareList({
					// tid:this.tid,
					// page:1,
					size:5,
				});
				if(res){
					this.list = res;
				}
			},
		}
	}
</script>

<style lang="scss">
	.shareDetail{
		width:100%;
		padding:12px;
		box-sizing: border-box;
		.titles{
			width: 100%;
			font-weight: bold;
			margin:24px 0 12px;
			.line{
				width: 50px;
				height: 0;
				border-top: 1px solid #808080;
				margin: 0 15px;
			}
		}
		.shareOne{
			width:100%;
			margin-bottom: 12px;
			.desc{
				width:100%;
				padding: 12px;
				box-sizing: border-box;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
				background: white;
				.author{
					font-size: 12px;
					color:#808080;
					margin: 6px 0;
				}
				.article{
					width:100%;
					font-size: 12px;
					color:#808080;
					/deep/img{
						display: block;
						width:100%!important;
					}
				}
				.actTit{
					width:100%;
					.tit{
						font-size: 15px;
						font-weight: bold;
					}
					.tools{
						width: max-content;
						font-size: 10px;
						.toolOne{
							width: max-content;
							margin-left: 8px;
						}
						.toolIcon{
							width: 15px;
							height: 15px;
							margin-right: 5px;
						}
					}
				}
			}
		}
		.showOne{
			.desc{
				.article{
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
</style>
